<template>
	<view class="turnover">
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>

		<view class="box flex_c">
			<view class="header flex_r_between">
				<view class="calendar" @click="openCalendar">
					<image src="/static/technician/calendar.png"></image>
					<text v-if="!endDate">{{startDate}}</text>
					<text v-else>{{startDate}} - {{endDate}}</text>
					<uni-icons type="bottom" :size="20" color="#333"></uni-icons>
				</view>
				<text class="money">
					收入：¥{{Number(price).toFixed(2)}}
				</text>
			</view>

			<view class="detail">
				<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
					<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无记录" :width="161"
						:height="129" v-show="list.length == 0"></blankPage>
						<view class="box_list" @click="openPopup(item)" v-for="(item,index) in list"
								:key="index">
							<view class="list flex_r_between">
								<view class="left">
									<text>{{item.type == 2 ? '提现' : item.title}}</text>
									<view>
										<uni-dateformat :date="item.create_time" format="yyyy-MM-dd"></uni-dateformat>
									</view>
								</view>
								<view class="right">
									<i>{{item.type == 2 ? '-' : ''}}</i> ¥{{Number(item.price)>0 ? Number(item.price).toFixed(2) : '0.00'}}
								</view>
							</view>
							<view class="remark flex_r_between" v-if="item.deduction_price != '0.00'">
								<text>退款原因:{{item.deduction_remark || '未填写'}}</text>
								<view>￥{{item.deduction_price}}</view>
							</view>
						</view>
					
				</cc-pullScroolView>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="close">
					<uni-icons type="close" :size="20" color="#333" @click="closePopup"></uni-icons>
				</view>
				<view class="top flex_c">
					<image :src="info.images && info.images[0]" mode="aspectFill"></image>
					<text>足疗保健项目</text>
					<view>+ {{Number(info.price)>0 ? Number(info.price).toFixed(2) : '0.00'}}</view>
				</view>
				<view class="bottom">
					<view class="item">
						<text>接单时间</text>
						<view>
							<uni-dateformat :date="info.start_time*1000" format="yyyy年MM月dd日 hh:mm"></uni-dateformat>
						</view>
					</view>
					<view class="item">
						<text>完成时间</text>
						<view>
							<uni-dateformat :date="info.end_time*1000" format="yyyy年MM月dd日 hh:mm"></uni-dateformat>
						</view>
					</view>
					<view class="item">
						<text>支付方式</text>
						<view>{{info.pay_type == 1 ? '微信' : '支付宝'}}</view>
					</view>
					<view class="item">
						<text>订单编号</text>
						<view>{{info.order_sn}}</view>
					</view>
					<view class="item" v-show="info.deduction_remark">
						<text>扣除原因</text>
						<view>{{info.deduction_remark}}</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,

				startDate: '',
				endDate: '',

				page: 1,
				total: 0,
				list: [],

				price: '0.00',

				info: {},
			}
		},
		methods: {
			change(e) {
				this.startDate = e.startDate
				this.endDate = e.endDate

				this.page = 1
				this.list = []
				this.getList()
			},
			openCalendar() {
				this.show = true
			},
			getList() {
				this.request.httpTokenRequest({
					url: "/technician.order/getStatementLog",
					method: "get"
				}, {
					page: this.page,
					times: this.startDate + '~' + this.endDate,
				}).then(res => {
					uni.hideLoading()
					this.$refs.pullScroll.success();
					if (res.code == 0) {
						this.total = res.data.total
						this.price = res.data.price
						res.data.data.forEach(item => {
							this.list.push(item)
						})
					}
				})
			},
			getToday() {
				let time = new Date()
				let year = time.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				return `${year}-${month}-${date}`
			},
			getWeek() {
				let time = Number(new Date()) - 604800000
				time = new Date(time)
				let year = time.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				return `${year}-${month}-${date}`
			},
			openPopup(e) {
				if(e.type == 2){return}
				this.info = e
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},

			pullDown(pullScroll) {
				this.page = 1
				this.list = []
				uni.showLoading()
				this.getList()
			},
		},
		onLoad() {
			this.endDate = this.getToday()
			this.startDate = this.getWeek()
			this.getList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-calendar__action {
		display: flex !important;
		padding: 20px 20%;
	}
	.turnover {
		padding: 30rpx;
		min-height: 100vh;
	}

	.box {
		min-height: calc(100vh - 60rpx);
	}

	.header {
		width: calc(100vw - 60rpx);
		margin-bottom: 30rpx;

		.calendar {
			display: flex;
			align-items: center;

			image {
				width: 27rpx;
				height: 26rpx;
			}

			text {
				font-size: 26rpx;
				color: #000000;
				line-height: 37rpx;
				margin: 0 10rpx;
			}
		}

		.money {
			font-size: 26rpx;
			color: #AAAAAA;
			line-height: 37rpx;
		}
	}

	.detail {
		width: calc(100vw - 60rpx);
		background: #FFFFFF;
		border-radius: 14rpx;
		flex: 1;
		padding: 0 30rpx;

		.list {
			padding: 20rpx 0;

			.left {
				text {
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
				}

				view {
					margin-top: 3rpx;
					font-size: 24rpx;
					color: #8E8E8E;
					line-height: 33rpx;
				}
			}

			.right {
				font-size: 30rpx;
				color: #FF0000;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				i {
					font-size: 30rpx;
					color: #FF0000;
					line-height: 42rpx;
					margin-right: 9rpx;
				}
			}
		}
	}

	.popup {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.close {
			display: flex;
			flex-direction: row-reverse;
		}

		.top {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			text {
				margin: 11rpx 0 1rpx;
				font-size: 22rpx;
				color: #8A8A8A;
				line-height: 30rpx;
			}

			view {
				font-size: 32rpx;
				font-weight: 600;
				color: #FF0000;
				line-height: 45rpx;
			}
		}

		.bottom {
			padding: 30rpx 30rpx 20rpx;
			background: rgba(243, 243, 243, 0.9);
			border-radius: 14rpx;
			margin-top: 40rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					font-size: 22rpx;
					color: #7D7D7D;
					line-height: 44rpx;
					margin-right: 20rpx;
				}

				view {
					font-size: 22rpx;
					color: #333330;
					line-height: 44rpx;
				}
			}
		}
	}
	.box_list {
		border-bottom: 1rpx solid #E9E9E9;
		.remark {
			padding: 10rpx 0;
			view {
				font-size: 32rpx;
				color: #FF0000;
				line-height: 45rpx;
			}
		}
	}
</style>